<template>
  <div class="share-detail" ref="details">
    <navbar @back="$router.back()" title="面经详情"></navbar>
    <div class="contain" v-if="infoObj.author">
      <!-- 头部标题 -->
      <h3>{{ infoObj.title }}</h3>
      <!-- 作者信息 -->
      <div class="author">
        <!-- <img src="../../../assets/zhou.jpg" alt="" /> -->
        <img :src="baseUrl + infoObj.author.avatar" alt="" />
        <div class="user-info">
          <div class="username">{{ infoObj.author.nickname }}</div>
          <div class="time">{{ infoObj.created_at | getTime }}</div>
        </div>
      </div>
      <!-- 文章内容 -->
      <div class="article" v-html="infoObj.content"></div>
      <!-- 评论区域 -->
      <div class="comment">
        <h3>评论<sup>87</sup></h3>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <myComment
            @userSend="userSend"
            :item="item"
            v-for="(item, index) in commentList"
            :key="index"
          ></myComment>
        </van-list>
      </div>
      <!-- 发表评论区域 -->
      <div class="write">
        <div class="input" @click="showPopup">
          我来补充两句
        </div>
        <div class="part">
          <i
            @click="collect"
            class="iconfont iconbtn_shoucang_nor"
            :class="{
              active: collectState(id)
            }"
          ></i
          ><span>{{ infoObj.collect }}</span>
        </div>
        <div class="part">
          <i
            @click="star"
            class="iconfont iconbtn_dianzan_small_nor"
            :class="{
              active: starState(id)
            }"
          ></i
          ><span>{{ infoObj.star }}</span>
        </div>
        <div class="part">
          <i class="iconfont iconbtn_share" @click="getShare"></i
          ><span>{{ infoObj.share }}</span>
        </div>
      </div>
      <!-- 评论弹出层 -->
      <van-popup v-model="show" class="mypop" position="bottom">
        <textarea
          v-model="commentText"
          class="ipt"
          :placeholder="place"
        ></textarea>
        <div
          v-if="commentText.length !== 0"
          class="btn"
          style="color:red"
          @click="send"
        >
          发送
        </div>
        <div v-else class="btn">发送</div>
      </van-popup>
      <!-- 分享面经弹出层 -->
      <van-popup v-model="shareShow">
        <div class="my-share">
          <div class="top">长按图片下载并分享</div>
          <div class="contain">
            <div class="big">
              <img :src="imgUrl" alt="" />
            </div>
            <div class="pic">
              <div class="small">
                <img src="../../../assets/share.png" alt="" />
              </div>
              <div class="qr-code">
                <div id="qrcode" ref="qrcode"></div>
              </div>
              <div class="text">
                长按二维码查看原图
              </div>
            </div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
// 导入接口方法
import {
  getShareDetail,
  getShareComment,
  sendComment,
  articleCollect,
  articleStar
} from '../../../api/articles'
// 导入token工具函数
import { getToken } from '../../../utils/token.js'
// 导入评论组件
import myComment from './comment.vue'
// 导入vuex辅助函数
import { mapState, mapGetters } from 'vuex'
// 导入截图工具
import html2canvas from 'html2canvas'
// 生成二维码工具
import QRCode from 'qrcodejs2'
export default {
  components: { myComment },
  data () {
    return {
      // 文章id
      id: '',
      // 信息对象
      infoObj: {},
      // 基地址
      baseUrl: process.env.VUE_APP_URL,
      // 评论列表
      commentList: [],
      // 下拉列表数据
      loading: false,
      finished: false,
      // 分页数据
      limit: 5,
      // 起始页码
      start: -5,
      // 总条数
      total: 0,
      // 评论弹出层
      show: false,
      // 评论内容
      commentText: '',
      // 默认文本框内容
      place: '',
      // 是否是回复状态
      isReplace: false,
      // 当前评论,与当前的commentlist形成数据绑定
      currentComment: [],
      // 面经分享是否弹出
      shareShow: false,
      // 截图路径
      imgUrl: ''
    }
  },
  computed: {
    // 导入MapState辅助函数
    ...mapState(['user', 'isLogin']),
    // 导入MapGetters辅助函数
    ...mapGetters(['collectState', 'starState'])
  },
  methods: {
    // 分享文章方法
    getShare () {
      this.shareShow = true
      // 生成截图路径
      html2canvas(this.$refs.details, { useCORS: true }).then(canvas => {
        var img = canvas.toDataURL('image/png')
        // 保存图片内容
        this.imgUrl = img
      })
      // 让dom加载完后再添加截图
      this.$nextTick(() => {
        // 生成二维码
        const qrcode = new QRCode('qrcode', {
          width: 75, // 二维码的宽
          height: 75, // 二维码的高
          text: window.location.href // 二维码对应的链接
        })
        console.log(qrcode)
      })
    },
    // 点赞&取消点赞方法
    async star () {
      // 判断登陆
      if (!this.$isLogin()) {
        return
      }
      this.$toast({
        type: 'loading',
        message: '加载中...',
        duration: 0
      })
      await articleStar(this.id)
      // 根据vuex中的信息更新数据
      if (this.starState(this.id)) {
        // 提示更新成
        this.$toast.success('取消点赞成功')
        // 修改当前文章信息
        this.infoObj.star -= 1
      } else {
        this.$toast.success('点赞成功')
        this.infoObj.star += 1
      }
      // 再次更行vuex中的数据
      this.$store.dispatch('upDateUser')
    },
    // 收藏&取消收藏面经方法
    async collect () {
      // 判断登录状态
      if (!this.$isLogin()) {
        return
      }
      this.$toast({
        type: 'loading',
        message: '加载中...',
        duration: 0
      })
      await articleCollect(this.id)
      console.log(this.collectState(this.id))
      if (this.collectState(this.id)) {
        // 提示更新成
        this.$toast.success('取消收藏成功')
        // 修改当前文章信息
        this.infoObj.collect -= 1
      } else {
        this.$toast.success('收藏成功')
        this.infoObj.collect += 1
      }
      // 将数据更新到vuex
      this.$store.dispatch('upDateUser')
    },
    // 回复评论
    async userSend (item) {
      // 保存当前评论
      this.currentComment = item
      this.show = true
      this.place = '回复:' + item.author.nickname
      this.isReplace = true
    },
    // 发送评论
    async send () {
      // 判断用户是否登录(就是判断当前是否有token),如果不存在则直接跳转会登录页面,并中断代码
      const token = getToken()
      if (!token) {
        this.$toast.fail('您还没有登录')
        this.$router.push('/login?to_path=' + this.$route.fullPath)
        return
      }
      // 判断是回复评论还是发表评论
      if (!this.isReplace) {
        const res = await sendComment({
          content: this.commentText,
          article: this.id
        })
        // console.log(res.data.data)
        this.commentList.unshift(res.data.data)
      } else {
        const res = await sendComment({
          content: this.commentText,
          article: this.id,
          parent: this.currentComment.id
        })
        console.log(res.data.data)
        this.currentComment.children_comments.push(res.data.data)
      }
      this.commentText = ''
      // 关闭对话框
      this.show = false
    },
    // 评论弹出方法
    showPopup () {
      this.place = '写点什么吧'
      this.isReplace = false
      this.show = true
    },
    async onLoad () {
      // 发起请求获取评论数据
      this.start += this.limit
      const res = await getShareComment({
        id: this.id,
        limit: this.limit,
        start: this.start
      })
      // console.log(res.data.data.list)
      // 载入评论数据
      this.commentList.push(...res.data.data.list)
      this.total = res.data.data.total
      this.loading = false
      // 判断是否加载完毕
      if (this.commentList.length >= this.total) {
        this.finished = true
      }
    }
  },
  async created () {
    // 获取文章id
    this.id = this.$route.params.id
    // console.log(this.id)
    // 发起请求
    const res = await getShareDetail(this.id)
    this.infoObj = res.data.data
  }
}
</script>

<style lang="less" scoped>
.share-detail {
  padding-bottom: 34px;
  .contain {
    // 收藏文章样式
    .active {
      color: red;
    }
    padding: 0 15px;
    // 头部标题
    h3 {
      font-size: 18px;
      font-weight: 500;
      line-height: 25px;
    }
    // 作者信息
    .author {
      margin-bottom: 10px;
      display: flex;
      img {
        width: 35px;
        height: 35px;
        opacity: 1;
        border-radius: 50%;
      }
      .user-info {
        font-size: 12px;
        margin-left: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .time {
          color: #b4b4bd;
        }
      }
    }
    // 文章内容
    .article {
      /deep/ img {
        height: 194px;
        opacity: 1;
      }
      font-size: 16px;
      line-height: 27px;
      font-weight: 400;
    }
    // 评论区域
    // .comment {
    // }
    // 评论发表区域
    .write {
      background-color: #fff;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100vw;
      padding: 0 15px;
      display: flex;
      align-items: center;
      font-size: 12px;
      .input {
        background-color: #f7f4f5;
        width: 190px;
        height: 34px;
        line-height: 34px;
        padding-left: 8px;
        box-sizing: border-box;
        color: #000;
        border-radius: 10px;
      }
      .part {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        color: #c9c9d0;
      }
    }
    .mypop {
      padding: 20px 15px;
      box-sizing: border-box;
      .ipt {
        box-sizing: border-box;
        border-radius: 6px;
        width: 100%;
        height: 100px;
        padding: 15px;
        font-size: 14px;
        border: none;
        background-color: #ccc;
      }
      .btn {
        margin-top: 10px;
        font-size: 16px;
        text-align: right;
      }
    }
    // 分享组件样式
    .my-share {
      width: 311px;
      background-color: #00b8d4;
      overflow: hidden;
      padding: 0 15px 10px;
      box-sizing: border-box;
      .top {
        text-align: center;
        margin: 15px;
        // 调整文字间距样式
        letter-spacing: 5px;
        color: aliceblue;
        font-size: 12px;
      }
      .contain {
        background-color: aliceblue;
        height: 100%;
        padding: 0;
        padding-bottom: 15px;
        text-align: center;
        border-radius: 10px;
        overflow: hidden;
        .big {
          height: 250px;
          overflow: hidden;
          img {
            width: 100%;
          }
        }
        .small {
          margin: 30px 0 20px;
          img {
            width: 119px;
            height: 36px;
          }
        }
        .qr-code {
          #qrcode {
            /deep/ img {
              margin: 0 auto;
            }
          }
        }
        .text {
          margin-top: 10px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
